<template>
  <div>
    <basic-container>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        <el-breadcrumb-item>书籍分类一级列表</el-breadcrumb-item>
      </el-breadcrumb>
    </basic-container>
    <basic-container style="padding-bottom:200px;background-color:white">
      <div >
         <el-popover
          placement="bottom"
          title="分类ids，按照选中顺序排序"
          width="400"
          trigger="manual"
          :content="categoryIds"
          v-model="visible">
          <el-button slot="reference" @click="getCategoryId" icon="el-icon-info">生成选中分类ids</el-button>
        </el-popover>

        <el-button @click="refresh" icon="el-icon-refresh">刷新</el-button>
        <div>
          <h4>男频</h4>
          <div>
            <el-checkbox-group v-model="form.shield_category" >
              <dev  v-for="(e, i) in category_1_list.filter((e) => e.site == 1)"
                :key="i">
                <el-checkbox
                  :label="e.category_id"
                  v-model="e.category_id"
                  border
                  style="width: 250px; height: 100px;"
                  class="category_select"
                >{{ e.name }}
                <el-tag size="mini">id:{{e.category_id}}</el-tag>
                <el-image size="mini"
                  style="width: auto; height: 50px;"
                  :src="e.cover_url"
                  fit="contain"></el-image>
                </el-checkbox>
              </dev>
              
            </el-checkbox-group>
          </div>
        </div>
        <div>
          <h4>女频</h4>
          <div>
            <el-checkbox-group v-model="form.shield_category">
              <dev  v-for="(e, i) in category_1_list.filter((e) => e.site == 2)"
                :key="i">
                <el-checkbox
                  :label="e.category_id"
                  v-model="e.category_id"
                  border
                  style="width: 250px; height: 100px;"
                  class="category_select"
                >{{ e.name }}
                <el-tag size="mini">id:{{e.category_id}}</el-tag>
                <el-image size="mini"
                  style="width: auto; height: 50px;"
                  :src="e.cover_url"
                  fit="contain"></el-image>
                </el-checkbox>
              </dev>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </basic-container>
  </div>
</template>

<script>
import { common } from "@/api/cat/httpRequest";
import {
  bookCategory
} from "@/api/cat/baseUrls";
export default {
  data() {
    return {
      data: [],
      params: {},
      form: {
        shield_category: [],
        shield_book: '',
      },
      category_1_list: [],
      categoryIds:"",
      visible: false
    };
  },
  methods: {
    getCategoryId(){
      console.info(this.form.shield_category.join(","))
      this.visible = !this.visible;
      this.categoryIds = this.form.shield_category.join(",");
    },
    refresh(){
      this.categoryIds = '';
      this.form.shield_category = []
    },
    async getCategory(){
      let { data: data1 } = await common(`${bookCategory.selectByPreference}/0`);
      this.category_1_list = data1;
    }
  },
  async created() {
    this.getCategory();
  },
};
</script>
<style>
.category_select {
  margin-top: 5px;
  margin-right: 5px;
}
.category-parent-select {
  color: #409EFF;
  border-color: #409EFF !important;
}
</style>